<!-- 起草 需要先一步展示的列表界面 -->
<template>
  <div id="showpop">

    <div class="nav bg-theme color-f text-l">
      <div style="display:flex;flex:2;">

        <i class="iconfont icon-fanhui font19 pl08 iback" @click="$router.back(-1)"></i>
        <span class="font19 ml16"> {{ pageTitle }}</span>
      </div>

      <span v-if="hasSearchButton" style="margin-right:10px;margin-left:10px">
        <van-icon @click="showFilterPopupView = true" name="search" size="25" />
      </span>
    </div>

    <div class="pageView">
      <component :is="currentTableView" ref="filterView" :pushParams="params" style="height:calc(100vh-50px)">
      </component>

      <van-popup v-model="showFilterPopupView" position="top" style="padding:20px 0 20px 0" get-container="#showpop">

        <!-- 项目交接 -->
        <div>
          <van-field v-if="showFilterTypeName" label-width="7.5em" v-model="projectName" label="立项项目名称:"
            placeholder="请填写立项项目名称" />
          <van-field v-if="showFilterTypeName" label-width="7.5em" v-model="projectId" label="立项项目编号:"
            placeholder="请填写立项项目编号" />
        </div>


        <!-- 项目变更、项目进度、项目开工  ——商机列表 -->
        <div>
          <van-field v-if="showFilterTypeNum" label-width="5.5em" v-model="businessId" label="商机编码:"
            placeholder="请填写商机编码" />
          <van-field v-if="showFilterTypeNum" label-width="5.5em" v-model="projectId" label="项目编码:"
            placeholder="请填写项目编码" />
          <van-field v-if="showFilterTypeDate" readonly v-model="sqbf_startDate" label="申请开始时间：" label-width="7em"
            placeholder="请选择" @click="showDateDialogFun('sqbf_startDate')" :right-icon="'arrow'" />
          <van-field v-if="showFilterTypeDate" readonly v-model="sqbf_endDate" label="申请结束时间：" label-width="7em"
            placeholder="请选择" @click="showDateDialogFun('sqbf_endDate')" :right-icon="'arrow'" />
        </div>


        <!-- 售前拜访——商机列表 -->
        <div>
          <van-field v-if="processID === 'dict_sqbf_code'" label-width="5.5em" v-model="sqbf_businessId" label="商机编码:"
            placeholder="请填写商机编码" />
          <van-field v-if="processID === 'dict_sqbf_code'" label-width="5.5em" v-model="sqbf_businessName" label="商机名称:"
            placeholder="请填写商机名称" />
          <van-field v-if="processID === 'dict_sqbf_code'" readonly v-model="sqbf_startDate" label="申请开始时间："
            label-width="7em" placeholder="请选择" @click="showDateDialogFun('sqbf_startDate')" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sqbf_code'" readonly v-model="sqbf_endDate" label="申请结束时间："
            label-width="7em" placeholder="请选择" @click="showDateDialogFun('sqbf_endDate')" :right-icon="'arrow'" />
        </div>


        <!-- 商机维护 ——商机列表 -->
        <div>
          <van-field v-if="processID === 'dict_sjwh_code'" input-align='left' label-width="6.5em"
            v-model="sjwh_businessId" label="省内商机编码:" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" input-align='left' label-width="6.5em"
            v-model="sqbf_businessName" label="集团客户编码:" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_businessStatus" label="DICT商机状态:"
            label-width="8.5em" @click="showOptionDialog('businessState')" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_isBusinessId" label="是否存在全网商机编号:"
            label-width="10.5em" @click="showOptionDialog('isBusinessId')" :right-icon="'arrow'" />

          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_createStartDate" label="创建开始日期:"
            label-width="6.5em" placeholder="请选择" @click="showDateDialogFun('sjwh_createStartDate')"
            :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_createEndDate" label="创建结束日期:"
            label-width="6.5em" placeholder="请选择" @click="showDateDialogFun('sjwh_createEndDate')"
            :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_businessMaintainStartTime"
            label="商机维护开始日期:" label-width="8.5em" placeholder="请选择"
            @click="showDateDialogFun('sjwh_businessMaintainStartTime')" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjwh_code'" readonly v-model="sjwh_businessMaintainEndTime"
            label="商机维护结束日期:" label-width="8.5em" placeholder="请选择"
            @click="showDateDialogFun('sjwh_businessMaintainEndTime')" :right-icon="'arrow'" />
        </div>
        <div>
          <van-field v-if="processID === 'dict_shystb_code'" input-align='left' label-width="5em"
                     v-model="projectEstablishName" label="项目编码:" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_shystb_code'" input-align='left' label-width="5em"
                     v-model="projectEstablishNumber" label="项目名称:" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_shystb_code'" readonly v-model="projectType" label="项目类型:"
                     label-width="5em" @click="showOptionDialog('projectType')" :right-icon="'arrow'" />
        </div>
        <div>
          <van-field v-if="processID === 'dict_sjyp_code'" label-width="5.5em" v-model="sqbf_businessId" label="商机编码:"
                     placeholder="请填写商机编码" />
          <van-field v-if="processID === 'dict_sjyp_code'" label-width="5.5em" v-model="sqbf_businessName" label="商机名称:"
                     placeholder="请填写商机名称" />
          <van-field v-if="processID === 'dict_sjyp_code'" readonly v-model="sqbf_startDate" label="商机录入开始时间：" label-width="9em"
                     placeholder="请选择" @click="showDateDialogFun('sqbf_startDate')" :right-icon="'arrow'" />
          <van-field v-if="processID === 'dict_sjyp_code'" readonly v-model="sqbf_endDate" label="商机录入结束时间：" label-width="9em"
                     placeholder="请选择" @click="showDateDialogFun('sqbf_endDate')" :right-icon="'arrow'" />
        </div>
        <van-popup v-model="showDateDialog" position="bottom" get-container="#showpop">
          <van-datetime-picker :formatter="formatter" type="date" v-model="nowDate" :min-date="strDate"
            :max-date="maxDate" @cancel="showDateDialog = false" @confirm="showDateDialogComfirm" />
        </van-popup>

        <van-popup v-model="showTypePopup" position="bottom" get-container="#app">
          <van-picker visible-item-count="6" show-toolbar :columns="typeColumns" @confirm="showConfirm"
            @cancel="showTypePopup = false" />
        </van-popup>

        <!-- 按钮 -->
        <div style="display: flex;margin:20px 0 0 0">
          <div style="width:50% ;text-align: center;">
            <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
              @click="resetButtonClick()" type="default">
              重置</van-button>
          </div>

          <div style="width:50%;text-align: center;">
            <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
              @click="sureButtonClick()" type="primary" color="#60a9ec">
              查询</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>

import drawup_sj_tab from "@/views/drawup_tab/drawup_sj_tab"
import drawup_sqbf_tab from "@/views/drawup_tab/drawup_sqbf_tab"
import drawup_hyjy_tab from '@/views/drawup_tab/drawup_hyjy_tab';
import drawup_sjwh_tab from "@/views/drawup_tab/drawup_sjwh_tab"
import xmjj_drawup_sj_tab from "@/views/xmjj/xmjj_drawup_sj_tab";
import drawup_sjyp_tab from "@/views/drawup_tab/drawup_sjyp_tab"

import jDrawupUtil, {dict_shystb_code} from '@/assets/js/dict_process_helper';
import { DrawupTransitonType_SJ, dict_sqbf_code, dict_xmjd_code, dict_xmkg_code, dict_sjwh_code,dict_sjyp_code } from '@/assets/js/dict_process_helper';
import { DrawupChooseType_SJ, dict_xmbg_code, DrawupChooseType_HYJY, dict_xmjj_code } from "../../assets/js/dict_process_helper";

import { mapGetters } from "vuex"
import { Notify, Toast } from 'vant'
import moment from 'moment'
import { getDictList } from '@/api/dictapi'
import drawup_shystb_tab from "@/views/drawup_tab/drawup_shystb_tab"
export default {
  data() {
    return {
      nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours(), new Date().getMinutes()),
      strDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
      maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),
      showDateDialog: false,
      params: this.$route.query,

      pageTitle: '',
      currentTableView: '',

      showFilterPopupView: false,
      businessId: '',
      projectId: '',
      projectName: '',
      sqbf_businessId: '',
      sqbf_businessName: '',
      sqbf_startDate: '',
      sqbf_endDate: '',
      sqbf_dateType: '',
      transType: '',
      processID: '',
      typeColumns: [],
      showTypePopup: false,
      sjwh_businessId: '',
      sjwh_customerCode: '',
      sjwh_businessStatus: '',
      sjwh_isBusinessId: '',
      sjwh_createStartDate: '',
      sjwh_createEndDate: '',
      sjwh_businessMaintainStartTime: '',
      sjwh_businessMaintainEndTime: '',
      hasSearchButton: true,
      optionType: '',
      projectEstablishName: '', // 项目名称
      projectEstablishNumber: '',  // 项目编码
      projectType: '', // 项目类型
    }
  },
  computed: {
    ...mapGetters(['user']),
    ...mapGetters(['userinfo']),


    // 筛选视图类型 
    // 创建时间（区间）
    showFilterTypeDate() {
      return this.processID === dict_xmjd_code || this.processID === dict_xmkg_code;
    },

    // 商机编码、项目编码
    showFilterTypeNum() {
      return this.processID === dict_xmjd_code || this.processID === dict_xmkg_code || this.processID === dict_xmbg_code;
    },


    // 项目名称、项目编码
    showFilterTypeName() {
      return this.processID === dict_xmjj_code;
    },

  },

  //生命周期--创建完成
  created() {

    this.getCurrentView();
  },


  beforeRouteEnter(to, from, next) {

    next(vm => {

      // console.log('AA', to, 'AAAA', from);
      // 起草 - 从二级”项目进度列表“进来（界面因为保活问题，第二次从”项目进度列表“进来的时候 created方法不会重新调用，所以需要确保”项目进度列表“进来（或唤醒）时，要刷新起草数据）
      // 通过 `vm` 访问组件实例
      if (from.name === 'apcdetail') {
        
        vm.params = to.query;
        vm.getCurrentView();
      }
    });
  },


  components: {
    drawup_sj_tab,
    drawup_sqbf_tab,
    drawup_sjwh_tab,
    drawup_hyjy_tab,
    xmjj_drawup_sj_tab,
    drawup_shystb_tab,
    drawup_sjyp_tab
  },
  //生命周期--创建完成
  activated() {
  },
  //生命周期--挂载完成
  mounted() {
  },




  //方法调用
  methods: {

    // 配置展示的真实界面
    getCurrentView() {
      this.transType = this.params.transType;
      this.processID = this.params.processID;
      console.log('AAA', this.processID, DrawupTransitonType_SJ);
      if (this.transType === DrawupTransitonType_SJ && (this.processID === dict_xmjd_code || this.processID === dict_xmkg_code)) {

        /// 商机列表
        this.currentTableView = drawup_sj_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.商机列表';
      }
      else if (this.processID == dict_xmjj_code) {

        // 项目交接 选择商机
        this.currentTableView = xmjj_drawup_sj_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.商机列表';
      }
      else if (this.transType === DrawupChooseType_SJ && this.processID === dict_xmbg_code) {
        // 项目变更 选择商机
        this.currentTableView = drawup_sj_tab;
        this.pageTitle = '选择项目';
      }
      else if (this.transType === DrawupChooseType_HYJY && this.processID === dict_xmbg_code) {
        // 项目变更 选择 会议纪要
        this.currentTableView = drawup_hyjy_tab;
        this.pageTitle = '选择会议纪要';
      }
      else if (this.processID === dict_sqbf_code) {
        /// 售前拜访——商机列表
        this.currentTableView = drawup_sqbf_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.商机列表';
      } else if (this.processID === dict_sjwh_code) {
        /// 商机维护-商机列表
        this.currentTableView = drawup_sjwh_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.商机列表';
      }
      else if (this.processID === dict_shystb_code) {
        /// 合同计划列表->三化预算填报
        this.currentTableView = drawup_shystb_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.列表';
      }
      else if (this.processID === dict_sjyp_code) {
        /// 商机维护-商机列表
        this.currentTableView = drawup_sjyp_tab;
        this.pageTitle = jDrawupUtil.getProcessName(this.processID) + '.商机列表';
      }
    },


    goBack() {
      this.$router.back(-1) //返回上一页
    },

    resetButtonClick() {
      this.showFilterPopupView = false;
      if (this.processID === dict_xmjd_code || this.processID === dict_xmkg_code) {

        let requestParam = { businessId: '', projectID: '', startDate: '', endDate: '' };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }
      else if (this.processID === dict_xmbg_code) {

        let requestParam = { businessId: '', projectID: '' };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }
      else if (this.processID === dict_xmjj_code) {

        let requestParam = { projectName: '', projectID: '' };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }
      else if (this.processID === dict_sqbf_code) {
        this.sqbf_businessId = '';
        this.sqbf_businessName = '';
        this.sqbf_startDate = '';
        this.sqbf_endDate = '';
        this.$refs.filterView.requestDataWithFliterCondition(this.sqbf_businessId, this.sqbf_businessName, this.sqbf_startDate, this.sqbf_endDate);
      } else if (this.processID === dict_sjwh_code) {
        this.sjwh_businessId='';
        this.sjwh_customerCode='';
        this.sjwh_businessStatus='';
        this.sjwh_isBusinessId='';
        this.sjwh_createStartDate='';
        this.sjwh_createEndDate='';
        this.sjwh_businessMaintainStartTime='';
        this.sjwh_businessMaintainEndTime='';
        this.$refs.filterView.requestDataWithFliterCondition(this.sjwh_businessId,this.sjwh_customerCode,this.sjwh_businessStatus,this.sjwh_isBusinessId,this.sjwh_createStartDate,this.sjwh_createEndDate,this.sjwh_businessMaintainStartTime,this.sjwh_businessMaintainEndTime);
      }else if (this.processID === dict_sjyp_code) {
        this.sqbf_businessId = '';
        this.sqbf_businessName = '';
        this.sqbf_startDate = '';
        this.sqbf_endDate = '';
        this.$refs.filterView.requestDataWithFliterCondition(this.sqbf_businessId,this.sqbf_businessName,this.sqbf_startDate,this.sqbf_endDate);
      }
      else if (this.processID === dict_shystb_code) {
        let requestParam = { projectEstablishName: '', projectEstablishNumber: '',projectType: '' };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }
    },

    sureButtonClick() {

      this.showFilterPopupView = false;
      if (this.processID === dict_xmjd_code || this.processID === dict_xmkg_code) {

        let requestParam = { businessId: this.businessId, projectID: this.projectId, startDate: this.sqbf_startDate, endDate: this.sqbf_endDate };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }
      else if (this.processID === dict_xmbg_code) {

        let requestParam = { businessId: this.businessId, projectID: this.projectId };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      }else if (this.processID === dict_xmjj_code) {
        let requestParam = { projectName: this.projectName, projectID: this.projectId };
        this.$refs.filterView.requestDataWithFliterCondition(requestParam);
      } else if (this.processID === dict_sqbf_code) {
        this.$refs.filterView.requestDataWithFliterCondition(this.sqbf_businessId, this.sqbf_businessName, this.sqbf_startDate, this.sqbf_endDate);
      } else if (this.processID === dict_sjwh_code) {
        this.$refs.filterView.requestDataWithFliterCondition(this.sjwh_businessId,this.sjwh_customerCode,this.sjwh_businessStatus,this.sjwh_isBusinessId,this.sjwh_createStartDate,this.sjwh_createEndDate,this.sjwh_businessMaintainStartTime,this.sjwh_businessMaintainEndTime);
      } else if (this.processID === dict_shystb_code) {
        this.$refs.filterView.requestDataWithFliterCondition(this.projectEstablishName, this.projectEstablishNumber,this.projectType);
      } else if (this.processID === dict_sjyp_code) {
        this.$refs.filterView.requestDataWithFliterCondition(this.sqbf_businessId,this.sqbf_businessName,this.sqbf_startDate,this.sqbf_endDate);
      }

    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      } else if (type === 'hour') {
        return `${val}时`;
      } else if (type === 'minute') {
        return `${val}分`;
      }
      return val;
    },
    showDateDialogFun(value) {
      this.sqbf_dateType = value
      this.showDateDialog = true
    },
    showDateDialogComfirm(value) {
      this.showDateDialog = false;
      this[this.sqbf_dateType] = moment(value).format('YYYY-MM-DD HH:mm:ss')
    },
    showOptionDialog(type) {
      console.log('111111')
      this.optionType = type
      if(type == 'projectType'){ //projectType
        this.typeColumns = ['普通立项','框架订单','框架结算','统谈分签'];
        this.showTypePopup = true;
      }else if (type != 'isBusinessId') {//不需要自定义直接去请求接口的
        getDictList(type, { userName: this.user.userName })
          .then((result) => {
            if (!result.data) {
              Notify(result.message);
              return;
            }
            this.typeColumns = [];
            for (var i = 0; i < result.data.data.length; i++) {
              this.typeColumns.push(result.data.data[i].name);
            }
            this.showTypePopup = true;
          })
      }else {//其余需要自定义的
        console.log('222222')
        if (type == 'isBusinessId') {
          this.typeColumns = ['是', '否'];
        }
        this.showTypePopup = true;
      }

    },
    showConfirm(value) {
      if (this.optionType == 'businessState') {
        this.sjwh_businessStatus = value
      } else if (this.optionType == 'isBusinessId') {
        this.sjwh_isBusinessId = value
      } else {
        this[this.optionType] = value
      }
      this.showTypePopup = false
    },
  }
}
</script>

<style scoped>
.errorPlace {
  position: absolute;
  margin-top: -80px;
  top: 50%;
  margin-left: -50px;
  left: 50%;
}
</style>